<template>
    <div class="system-offer-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover" class="layout-padding-auto">

                <div class="table-search-container">
                    <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px"
                        class="table-form">
                        <el-row>

                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="语言">
                                    <el-select v-model="state.ruleForm.languageType" placeholder="语言" clearable
                                        style="width: 100%">
                                        <dicItemsSelectOptions dicCode="articleLanguage" data-type="Int"
                                            :withNullValue="false" />
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="文章分类">
                                    <el-select v-model="state.ruleForm.categoryId" placeholder="请选择文章分类" clearable
                                        style="width: 100%">
                                        <el-option v-for="i in state.categoryList" :label="i.title" :value="i.id"
                                            :key="i.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="主标题">
                                    <el-input v-model="state.ruleForm.title" style="width: 100%"
                                        placeholder="主标题"></el-input>
                                </el-form-item>
                            </el-col>


                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <el-form-item class="table-form-btn" label-width="35px">
                                    <div>
                                        <el-button size="default" type="primary" @click="refresh()">查询
                                        </el-button>
                                        <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                        </el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>





                <div class="bar_tools">
                    <el-button-group class="ml-4">
                        <el-button type="primary" size="default" @click="addItem()">添加文章</el-button>
                    </el-button-group>
                </div>

                <el-table size="default" :data="state.dataList" style="width: 100%">
                    <el-table-column width="80" label="ID">
                        <template #default="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="标题">
                        <template #default="scope">
                            <span>{{ scope.row.title }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="副标题">
                        <template #default="scope">
                            <span>{{ scope.row.subTitle }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="封面图">
                        <template #default="scope">
                            <div v-if="scope.row.image">
                                <img style="width:67px;height:32px;" :src="scope.row.image" />
                            </div>
                            <div v-if="!scope.row.image">
                                无
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="排序号">
                        <template #default="scope">
                            <span>{{ scope.row.articleSort || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="语言">
                        <template #default="scope">

                            <dicItemsETag dataType="Int" dicCode="articleLanguage" :value="scope.row.languageType"
                                :key="scope.row.languageType"></dicItemsETag>

                            <!-- <el-tag v-if="scope.row.languageType == 2" effect="dark" type="success">英文</el-tag>
                            <el-tag v-if="scope.row.languageType == 3" effect="dark" type="success">中文繁体</el-tag>
                            <el-tag v-if="scope.row.languageType == 4" effect="dark" type="success">越南语</el-tag>
                            <el-tag v-if="scope.row.languageType == 5" effect="dark" type="success">日语</el-tag>
                            <el-tag v-if="scope.row.languageType == 6" effect="dark" type="success">韩语</el-tag> -->
                        </template>
                    </el-table-column>


                    <el-table-column align="center" label="文章分类">
                        <template #default="scope">
                            <el-tag effect="dark">{{ getCategoryName(scope.row.parentId) }}</el-tag>
                        </template>
                    </el-table-column>



                    <el-table-column width="200" align="center" label="创建日期">
                        <template #default="scope">
                            <span>{{ formatDate2(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建人">
                        <template #default="scope">
                            <span>{{ scope.row.createBy }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="更新人">
                        <template #default="scope">
                            <span>{{ scope.row.updateBy }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 1" effect="dark" type="success">启用</el-tag>
                            <el-tag v-if="scope.row.status != 1" effect="dark" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template #default="scope">
                            <div>
                                <el-button size="small" type="primary"
                                    @click.native.prevent="editItem(scope.row)">编辑</el-button>
                            </div>
                            <div v-if="scope.row.status == 1" style="margin-top:10px;">
                                <el-button size="small" type="danger"
                                    @click.native.prevent="changeItemState(scope.row)">禁用</el-button>
                            </div>
                            <div v-if="scope.row.status != 1" style="margin-top:10px;">
                                <el-button size="small" type="success"
                                    @click.native.prevent="changeItemState(scope.row)">启用</el-button>
                            </div>
                        </template>
                    </el-table-column>


                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.page" background
                v-model:page-size="state.limit" layout="total, sizes, prev, pager, next, jumper" :total="state.total">
            </el-pagination>
        </el-card>

        <actegoryDialog ref="actegoryDialogRef" @refresh="refresh"></actegoryDialog>
    </div>
</template>

<script setup lang="ts" name="systemMenu">

import { formatDate } from '/@/utils/formatTime';
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import { useCommonApi } from '/@/api/common/index'



// 引入组件
const actegoryDialog = defineAsyncComponent(() => import('./dialog.vue'));
const actegoryDialogRef = ref();

const dicItemsSelectOptions = defineAsyncComponent(() => import('/@/components/dic/dicItemsSelectOptions.vue'));
const dicItemsETag = defineAsyncComponent(() => import('/@/components/dic/dicItemsETag.vue'));


const state = reactive({
    page: 1,
    limit: 10,
    total: 0,
    categoryList: [] as any, // 分类列表
    dataList: [] as any,
    ruleForm: {
        categoryId: "", // 分类ID
        title: "", // 主标题
        languageType: "", //语言
    }
});








const editItem = (row: any) => {
    actegoryDialogRef.value.openDialog('edit', row);
}


const addItem = () => {
    actegoryDialogRef.value.openDialog('add');
}


const refresh = () => {
    getArticleList();
}



// 改变文章分类的状态
const changeItemState = (item: any) => {
    let statuTemp = item.status == 1 ? 0 : 1;
    let txtMsg = statuTemp == 1 ? "您是否要启用此文章?" : "您是否要禁用此文章?";
    ElMessageBox.confirm(txtMsg, '提示', {
        type: "warning",
        confirmButtonText: '确认',
        cancelButtonText: "取消"
    }).then(async () => {
        try {
            let obj = {
                status: statuTemp
            };
            obj = Object.assign({}, item, obj);
            await useCommonApi().updateArticle(obj);
            ElMessage.success("操作成功")
            item.status = statuTemp;
        } catch (error: any) {
            ElMessage.error(error.msg);
        }
    });
}




const handleResetSearch = () => {
    state.ruleForm = {
        categoryId: "", // 分类ID
        title: "" // 主标题
    };
    state.page = 1;
    state.limit = 10;
    getArticleList();
}



const formatDate2 = (str: any) => {
    if (!str) return "-";
    return formatDate(new Date(str), "YYYY-mm-dd HH:MM")
}


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.limit = val;
    getArticleList();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.page = val;
    getArticleList();
};



const getArticleList = async () => {
    let vo = {
        page: state.page,
        limit: state.limit,
        nodeType: 2
    } as any;


    if (state.ruleForm.languageType) vo.languageType = state.ruleForm.languageType.toString();
    if (state.ruleForm.categoryId) vo.parentId = state.ruleForm.categoryId.toString();
    if (state.ruleForm.title) vo.title = state.ruleForm.title;
    let tempList = await useCommonApi().articleList(vo);
    state.dataList = tempList.list;
    state.total = tempList.total;
}



const getCategoryName = (id: any) => {

    let str = "";
    state.categoryList.forEach((element: any) => {
        if (element.id == id) {
            str = element.title;
        }
    });


    return str;
}




// 获取文章的分类
const articleCategory = async () => {
    let obj = {
        page: 1,
        limit: 100,
        nodeType: 1
    };
    try {
        let tempList = await useCommonApi().articleList(obj);
        state.categoryList = tempList.list;
        if (state.categoryList.length > 0) {
            state.ruleForm.categoryId = state.categoryList[0].id;
            getArticleList();
        }
    } catch (error: any) {
        ElMessage.warning(error.msg);
    }
}




// 页面加载时
onMounted(() => {
    articleCategory();
});



</script>




<style scoped lang="scss">
.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.system-offer-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}


.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>

